var SearchForm = function () {
  var template = /* html */ `
    <div class="search-form">
      <sys-common-search :search="search" :response-filter-fun="getDropdownData" :search-field="searchFields" label-width="100px" input-width="180px">
        <template slot="prepend">
          <el-form-item label="交期">
            <el-date-picker v-model="search.jiaoDateStart" type="date" placeholder="选择开始交期" value-format="timestamp" :editable="false"
              :picker-options="jiaoDateStartOption" style="width:228px">
            </el-date-picker>
            <span>-</span>
            <el-date-picker v-model="search.jiaoDateEnd" type="date" placeholder="选择结束交期" value-format="timestamp" :editable="false"
              :picker-options="jiaoDateEndOption" style="width:228px">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="下单日期">
            <el-date-picker v-model="search.xiaDanDateStart" type="date" placeholder="选择开始下单日期" value-format="timestamp" :editable="false"
              :picker-options="xiaDanDateStartOption" style="width:228px">
            </el-date-picker>
            <span>-</span>
            <el-date-picker v-model="search.xiaDanDateEnd" type="date" placeholder="选择结束下单日期" value-format="timestamp" :editable="false"
              :picker-options="xiaDanDateEndOption" style="width:228px">
            </el-date-picker>
          </el-form-item>
        </template>
      </sys-common-search>
      <div style="text-align:center">
        <el-button size="medium" type="primary" @click="searchData">查询</el-button>
      </div>
    </div>
  `;

  return {
    props: {
      search: {
        type: Object,
        required: true
      },

      dropdownData: {
        type: Array,
        default: function () {
          return [];
        }
      }
    },

    data: function () {
      var self = this;
      return {
        searchFields: ['companyOrderId', 'factoryId', 'customerId', 'customerOrderId', 'customer', 'orderDept'],
        jiaoDateStartOption: {
          disabledDate: function (time) {
            return !self.dateLimit(time, 'start', 'jiaoDate');
          }
        },
        jiaoDateEndOption: {
          disabledDate: function (time) {
            return !self.dateLimit(time, 'end', 'jiaoDate');
          }
        },
        xiaDanDateStartOption: {
          disabledDate: function (time) {
            return !self.dateLimit(time, 'start', 'xiaDanDate');
          }
        },
        xiaDanDateEndOption: {
          disabledDate: function (time) {
            return !self.dateLimit(time, 'end', 'xiaDanDate');
          }
        }
      };
    },

    methods: {
      getDropdownData: function () {
        return Promise.resolve(this.dropdownData);
      },

      dateLimit: function (time, type, field) {
        var search = this.search;
        var date = null;
        if (type === 'start') {
          date = search[`${field}End`];
          if (date === null) {
            return true;
          }
          return moment(time).isSameOrBefore(moment(date), 'day');
        }

        date = search[`${field}Start`];
        if (date === null) {
          return true;
        }
        return moment(time).isSameOrAfter(moment(date), 'day');
      },

      searchData: function () {
        this.$emit('search-data');
      }
    },

    components: {
      SysCommonSearch: SysCommonSearch
    },

    template: template
  };
}();
